<!--
 作者：ex_baiyc
 日期：2016-10-17
 功能：我的关注页面
 参数：
 事件：
-->
<template>
  <div>
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        @click="this.$broadcast('goBack')">
      </div>
      <div
        class="rightButton"
        type="button"
        slot="right-button">
        <span v-if="isEdit" @click="save" class="rightButton-onlytext">编辑</span>
        <span v-else @click="showEditor" class="rightButton-onlytext">完成</span>
      </div>
    </toolbar>
    <!--编辑状态时展示-->
    <div v-show="!isEdit" class="concerns">
      <div class="title"> 我的关注 <!--<span class="my-concerns-badge">{{myConcerns.length}}</span>--></div>
      <ul class="my-concerns">
        <li v-for="item in myConcerns"
            :id="item.id"
            @click="del($event, item.id)"
            class="active">
          {{item.brand}}
        </li>
      </ul>
      <div class="title">所有品牌</div>
      <div class="all-brand">
        <div class="search-box">
          <input placeholder="请输入关键字进行模糊查询" v-model="keyWords" id="brandAInput">
        </div>
        <ul v-for="classifications in allBrand" v-show="classifications.length > 0" >
        <div class="classifications-title" v-show="classifications.length > 0">{{classifications[0].pinyinCapital}}</div>
        <li v-for="item in classifications | filterBy keyWords"
            :id="item.id"
            :class="[{ 'active' : myConcernsStr.indexOf(item.brand) > -1}]"
            @click="add($event, item.id)">
          {{item.brand}}
        </li>
      </ul>
      </div>
    </div>
    <!--非编辑状态时展示-->
    <div v-else class="concerns">
      <div class="title"> 我的关注 <!--<span class="my-concerns-badge">{{myConcerns.length}}</span>--></div>
      <ul class="my-concerns">
        <li v-for="item in myConcerns"
            :id="item.id">
          {{item.brand}}
        </li>
      </ul>
      <div class="all-bran">
        <div class="title">所有品牌</div>
        <ul v-for="classifications in allBrand" v-show="classifications.length > 0">
          <div class="classifications-title">{{classifications[0].pinyinCapital}}</div>
          <li v-for="item in classifications"
              :id="item.id">
            {{item.brand}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'

  export default {
    components: {
      Toolbar
    },
    data () {
      return {
        myConcernsStr: '',
        viewTitle: '我的关注',
        myConcerns: [],
        allBrand: [],
        isEdit: false
      }
    },
    computed: {},
    methods: {
      goBack: function () {
        window.history.back()
      },
      showEditor: function () {
        this.isEdit = true
        window.alert('保存成功!')
      },
      save: function () {
        this.isEdit = false
      },
      add: function ($event, id) {
        var _this = this
        if (this.myConcernsStr.indexOf(id) === -1) {
          if (_this.myConcerns.length >= 10) {
            window.alert('关注品牌不能超过10个！')
            return
          }
          var brand = $event.target.innerText
          var brandId = $event.target.id
          this.$http.post(window.interface.addCollBrand, {'brand': brand, 'brand_id': brandId}).then((res) => {
            this.getData()
          })
          if (_this.myConcerns.length > 9) {
            document.getElementsByClassName('all-brand')[0].style.height = '40vh'
            document.getElementsByClassName('all-brand')[1].style.height = '40vh'
          } else if (_this.myConcerns.length > 6) {
            document.getElementsByClassName('all-brand')[0].style.height = '47vh'
            document.getElementsByClassName('all-brand')[1].style.height = '47vh'
          } else if (_this.myConcerns.length > 3) {
            document.getElementsByClassName('all-brand')[0].style.height = '55vh'
            document.getElementsByClassName('all-brand')[1].style.height = '55vh'
          }
        } else {
          this.del($event, id)
          if (_this.myConcerns.length < 4) {
            document.getElementsByClassName('all-brand')[0].style.height = '55vh'
            document.getElementsByClassName('all-brand')[1].style.height = '55vh'
          } else if (_this.myConcerns.length < 7) {
            document.getElementsByClassName('all-brand')[0].style.height = '47vh'
            document.getElementsByClassName('all-brand')[1].style.height = '47vh'
          } else if (_this.myConcerns.length < 10) {
            document.getElementsByClassName('all-brand')[0].style.height = '40vh'
            document.getElementsByClassName('all-brand')[1].style.height = '40vh'
          }
        }
        this.getData()
      },
      del: function ($event, id) {
        var brand = $event.target.innerText
        var brandId = $event.target.id
        this.$http.post(window.interface.delCollBrand, {'brand': brand, 'brand_id': brandId}).then((res) => {
          this.getData()
        })
      },
      getData: function () {
//        this.$dispatch('changeLoadingStatus', true)
        this.$http.post(window.interface.collBrand).then(function (res) {
          this.$dispatch('changeLoadingStatus', false)
          this.allBrand = res.json().brands
          this.myConcerns = res.json().collectBrands
          this.myConcernsStr = JSON.stringify(res.json().collectBrands)
        })
      }
    },
    ready: function () {
      this.getData()
      var brandAInput = document.getElementById('brandAInput')
      brandAInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      brandAInput.onblur = function () {
        document.body.removeAttribute('id')
      }
    },
    watch: {
//      'myConcerns': function (newV) {
//        if (newV.length > 9) {
//          document.getElementsByClassName('all-brand')[0].style.height = '40vh'
//          document.getElementsByClassName('all-brand')[1].style.height = '40vh'
//        } else if (newV.length > 6) {
//          document.getElementsByClassName('all-brand')[0].style.height = '47vh'
//          document.getElementsByClassName('all-brand')[1].style.height = '47vh'
//        } else if (newV.length > 3) {
//          document.getElementsByClassName('all-brand')[0].style.height = '55vh'
//          document.getElementsByClassName('all-brand')[1].style.height = '55vh'
//        }
//      }
    }
  }

</script>
<style lang="scss" scoped>
  .concerns {
    margin: 7.5vh 5vw 7.2vh 5vw;

    .search-box{
      height: .8rem;
    }

    .title {
      padding-top: 2vh;
      padding-bottom: 2vh;
      font-size: .36rem;


      .my-concerns-badge {
        position: relative;
        display: inline-block;
        width: .4rem;
        height: .4rem;
        line-height: .4rem;
        text-align: center;
        background: #f00;
        border-radius: 50%;
        color: #fff;
      }
    }

    ul {

      li {
        display: inline-block;
        margin: .11rem .09rem .11rem .09rem;
        padding: .1rem;
        width: 27%;
        text-align: center;
        border: 1px solid #eee;
        border-radius: 3px;
        white-space: nowrap;
        overflow: hidden;
      }
    }

  }

  input{
    padding-left: .3rem;
    width: 95%;
    height: .8rem;
    line-height: 100%;
    border: 1px solid #eee;
    background: #f8f8f8 url("../../../static/img/icon-search.png") no-repeat 95% center / .3rem .3rem;
  }

  .active {
    background: rgba(246, 250, 255, 1) url(../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
  }

  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../static/img/btn-back.png') no-repeat center / 100%;
  }
  .rightButton{
    font-size: .28rem;
  }
  .all-brand{
    height: 60vh;
    overflow-y: scroll;
  }
</style>
